<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 200px;
            margin: 50px;
        }

        ul {
            list-style: none;

        }


        a {
            text-decoration: none;
            color: #666;
        }

        a:hover {
            color: #6cf;
        }
    </style>
</head>

<body>
    <script>
        const news = [
            { "category": "要闻", "title": "牢记初心使命 实干笃定前行", "href": "https://news.ifeng.com/c/7wNelHB0SgK" },
            { "category": "要闻", "title": "你以生命相托，我必全力以赴", "href": "https://news.ifeng.com/c/7wM1V3EzQBM" },
            { "category": "要闻", "title": "中国无人战车正式服役：机枪显示惊人杀伤力", "href": "https://tech.ifeng.com/c/7wMT02ftUZ4" },
            { "category": "健康", "title": "独家 | 武汉封城建议者：向武汉人民致敬，向援助武汉的人致敬", "href": "https://finance.ifeng.com/c/7wM0E6Bs8PI" },
            { "category": "汽车", "title": "马斯克发飙：起诉当地政府！总部搬离加州！", "href": "http://auto.ifeng.com/c/7wM43afWMFs" },
            { "category": "汽车", "title": "奇瑞真正的旗舰SUV，车长近5米+2.0T动力，气场不输路虎揽胜", "href": "https://auto.ifeng.com/c/7wIpWtWvHYv" },
            { "category": "房产", "title": "广州即将推出9宗土地 涉及22.2万平米4宗宅地", "href": "https://gz.house.ifeng.com/news/2020_05_11-52744145_0.shtml" }
        ];
        // 1.构造结构
        let box = `<div class="box">
            <ul>
            `
        // 对数组进行遍历,利用数组下标为对象名拿到对应对应数据  
        for (let i = 0; i < news.length; i++) {
            box += `
            <li>
                <a href="${news[i].href}"target="_blank">
                    ${news[i].category}${news[i].title}
                </a>
            </li>
            `
        }
        // 关闭盒子,并输出 
        box += `
        </ul>
    </div>
        `
        document.write(box)
        /* 核心技术:利用数组下标为对应的对象名,而链接中的内容则是属性值,可通过对象名.属性名拿到,为news[i].各属性名,最后通过数组遍历的便利把各信息输出到对应位置上即可 */
    </script>
</body>

</html>